<template>
  <div id="subclass-info-list" class="card col-12 px-0 mt-5">
    <nav aria-label="breadcrumb" role="navigation">
      <ol class="breadcrumb pb-0">
        <li class="breadcrumb-item ms-1" aria-current="page">基础数据</li>
        <li class="breadcrumb-item active" aria-current="page">舱位信息</li>
      </ol>
    </nav>
    <template v-if="isSearchMode">
      <div class="card-body">
        <form>
          <div class="row mb-2">
            <input
              type="textfield"
              class="form-control"
              placeholder="航空公司"
              v-model.trim="carrier0"
              size="10"
            />
          </div>
          <div class="row mb-2">
            <input
              type="textfield"
              class="form-control"
              placeholder="舱位"
              v-model.trim="subclass0"
              size="6"
            />
          </div>
          <div class="row mb-2">
            <button
              type="button"
              class="btn btn-primary mb-2"
              @click.stop="search()"
            >
              查找
            </button>
            <button
              type="button"
              class="btn btn-secondary"
              @click.stop="resetSearch()"
            >
              重置
            </button>
          </div>
        </form>
      </div>
    </template>
    <template v-else>
      <div class="card-body py-1">
        <button
          type="button"
          class="btn btn-primary"
          @click.stop="showSearch()"
        >
          查找
        </button>
        <a
          href="javascript:void(0)"
          class="ms-1"
          @click.stop="quickSearch('MU')"
          >MU</a
        >
        <a
          href="javascript:void(0)"
          class="ms-1"
          @click.stop="quickSearch('CZ')"
          >CZ</a
        >
        <a
          href="javascript:void(0)"
          class="ms-1"
          @click.stop="quickSearch('CA')"
          >CA</a
        >
        <template v-if="isDataAdmin">
          <a
            href="javascript:void(0)"
            class="btn btn-success ms-auto me-auto"
            @click="newSubclass()"
            >新建</a
          >
          <button
            type="button"
            class="btn btn-success float-end"
            @click.stop="editTimeFrame()"
          >
            退改时间
          </button>
        </template>
      </div>
      <table class="table table-striped table-sm">
        <thead>
          <tr class="bg-info">
            <th rowspan="2" class="text-center">航司</th>
            <th rowspan="2" class="text-center">舱位</th>
            <th></th>
            <th rowspan="2" class="text-center">乘客</th>
            <th rowspan="2" class="text-center d-none d-md-table-cell">描述</th>
            <th rowspan="2" class="text-center d-none d-md-table-cell">折扣</th>
            <th rowspan="2" class="text-center d-none d-md-table-cell">
              代理费
            </th>
            <th rowspan="2" class="text-center d-none d-md-table-cell">OPEN</th>
            <th rowspan="2" class="text-center">自愿签转</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          <tr
            v-for="(info, index) in dataList"
            :key="index"
            @click.stop="showDetail(info.id)"
          >
            <td class="text-center">{{ info.carrier }}</td>
            <td class="text-center">
              {{ info.subclass }}
            </td>
            <td>
              <span v-if="info.cabinType === 10" class="small">头等舱</span>
              <span v-if="info.cabinType === 20" class="small">商务舱</span>
              <span v-if="info.cabinType === 30" class="small">经济舱</span>
              <span v-if="info.cabinType === 40" class="small">超级经济舱</span>
            </td>
            <td class="text-center">
              <span v-if="info.psgType === 0">成人</span>
              <span v-if="info.psgType === 1">儿童</span>
              <span v-if="info.psgType === 2">婴儿</span>
              <span v-if="info.psgType === 8">伤残军人/警察</span>
            </td>
            <td class="d-none d-md-table-cell">{{ info.subclassDesc }}</td>
            <td class="d-none d-md-table-cell">{{ info.discount }}</td>
            <td class="d-none d-md-table-cell">{{ info.commission }}</td>
            <td class="d-none d-md-table-cell">
              {{ showAllowDesc(info.openAllowed) }}
            </td>
            <td class="text-center">{{ showAllowDesc(info.endorsable) }}</td>
            <td>
              <i class="mdi mdi-arrow-right fa-2"></i>
            </td>
          </tr>
        </tbody>
      </table>
      <div>
        备注：成人舱位的折扣数仅供参考；儿童、婴儿、伤残军人/警察舱位的折扣数表示相同成人舱位的价格的百分数。
      </div>
      <nav id="pagination-box" class="float-end">
        <my-pagination
          name="pagination"
          :row-count="sc.rowCount"
          :page-total="sc.pageTotal"
          :page-no="sc.pageNo"
          @next-page="nextPage"
          @prev-page="prevPage"
          @direct-page="directPage"
        ></my-pagination>
      </nav>
    </template>
  </div>
</template>

<script>
import MyPagination from "@/components/my-pagination.vue";
import $ from "jquery";
import {
  searchSubclasses,
  saveSubclass,
  searchFlightConditionTimeWindow,
  saveFlightConditionTimeWindow,
} from "@/api/basic-data.js";

export default {
  components: {
    MyPagination,
  },
  data() {
    return {
      isSearchMode: false,
      sc: {
        rowCount: 0,
        pageNo: 1,
        pageSize: 25,
        pageTotal: 0,
      },
      carrier0: "MU",
      subclass0: "",

      dataList: [],
      timeWindows: [],

      keepInputing: false,
      inputing: false,
      frameEditing: false,

      refundLabel1: "退票手续费1",
      refundLabel2: "退票手续费2",
      refundLabel3: "退票手续费3",
      refundLabel4: "退票手续费4",
      changeLabel1: "改签手续费1",
      changeLabel2: "改签手续费2",
      changeLabel3: "改签手续费3",
      changeLabel4: "改签手续费4",
    };
  },
  computed: {
    isDataAdmin() {
      return this.$store.getters.isDataAdmin;
    },
  },
  mounted: function () {
    this.search();
  },
  watch: {
    timeWindows() {
      // console.log(this.timeWindows)
      this.changeTimeWindowLabels();
    },
  },
  methods: {
    showErrMsg: function (msg, msgType) {
      this.$store.dispatch("showAlertMsg", {
        errMsg: msg,
        errMsgType: msgType,
      });
    },
    showSearch: function () {
      this.isSearchMode = true;
    },
    quickSearch: function (carrier) {
      this.carrier0 = carrier;
      this.subclass0 = "";
      this.search();
    },
    search: function () {
      if (this.carrier0.length != 2) {
        this.showErrMsg("请先输入航司代码");
        return;
      }
      this.isSearchMode = false;
      const params = {
        "sc.pageNo": this.sc.pageNo,
        "sc.pageSize": this.sc.pageSize,
        "sc.carrier": this.carrier0,
        "sc.subclass": this.subclass0,
      };
      searchSubclasses(params, (jsonResult) => {
        this.dataList = jsonResult.dataList;
        this.sc = jsonResult.page;
      });

      searchFlightConditionTimeWindow(
        {
          carrier: this.carrier0,
        },
        (v) => {
          this.timeWindows = v;
        }
      );
    },
    showDetail: function (id) {
      this.$router.push("/h5/data/subclass/" + id);
    },
    changeTimeWindowLabels: function () {
      for (let t of this.timeWindows) {
        // console.log(t.windowOrder)
        switch (t.windowOrder) {
          case 1:
            this.refundLabel1 = this.showTimeWindowDesc(t);
            this.changeLabel1 = this.showTimeWindowDesc(t);
            break;
          case 2:
            this.refundLabel2 = this.showTimeWindowDesc(t);
            this.changeLabel2 = this.showTimeWindowDesc(t);
            break;
          case 3:
            this.refundLabel3 = this.showTimeWindowDesc(t);
            this.changeLabel3 = this.showTimeWindowDesc(t);
            break;
          case 4:
            this.refundLabel4 = this.showTimeWindowDesc(t);
            this.changeLabel4 = this.showTimeWindowDesc(t);
            break;
        }
      }
    },
    showTimeWindowDesc: function (t) {
      let desc = "＠";
      if (t.maxHours != 0) {
        let desc0 = t.maxHours + "H";
        if (t.maxIncluded == 1) {
          desc0 += " => ";
        } else {
          desc0 += " > ";
        }
        desc = desc0 + desc;
      }

      if (t.minHours != 0) {
        let desc0;
        if (t.minIncluded == 1) {
          desc0 = " >= ";
        } else {
          desc0 = " > ";
        }
        desc0 += t.minHours + "H";
        desc = desc + desc0;
      }

      return desc;
    },
    showFeeRateDesc: function (feeRate) {
      if (feeRate == 0) {
        return "免费";
      } else {
        return feeRate + "%";
      }
    },
    showAllowDesc: function (status) {
      if (status === 0) {
        return "不允许";
      } else if (status === 1) {
        return "允许";
      } else {
        return status;
      }
    },
    resetSearch: function () {
      this.carrier0 = "";
      this.subclass0 = "";

      this.sc.pageNo = 1;
    },
    newSubclass: function () {
      this.$router.push("/h5/data/subclass");
    },
    editTimeFrame: function () {
      this.$router.push("/h5/data/ruleTimeWindow?carrier=" + this.carrier0);
    },
    prevPage: function () {
      this.sc.pageNo = this.sc.pageNo - 1;
      if (this.sc.pageNo < 1) this.sc.pageNo = 1;
      this.search();
    },
    nextPage: function () {
      this.sc.pageNo = this.sc.pageNo + 1;
      this.search();
    },
    directPage: function (pageNo) {
      this.sc.pageNo = pageNo;
      this.search();
    },
  },
};
</script>
